<template>
    <vp-card>
        <template #header>       
            <div class="card-header" @click="handleCollapseChange">
                <slot name="header"></slot>
                <el-icon>
                    <ele-ArrowRight v-show="collapse"/>
                    <ele-ArrowDown v-show="!collapse"/>
                </el-icon>
            </div>
        </template>
        <slot name="fixed"></slot>
        <el-collapse-transition> 
            <div v-show="!collapse">
                <slot></slot>
            </div>
        </el-collapse-transition>
    </vp-card>
</template>
<script lang="ts">
export default {
    name: 'vpCollapseCard',
}
</script>
<script setup lang="ts">
    import { ref } from 'vue'

    interface Props {
        collapse: boolean,
    }
    const props = withDefaults(defineProps<Props>(),{
        collapse: false,
    })
    const emits = defineEmits(['change']);
    const collapse = ref(props.collapse)
    
    const handleCollapseChange = () => {
        collapse.value = !collapse.value;
        emits("change", collapse.value);
    }
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>